<div class="session-panel chat-room" ng-controller="chatroomController">
    <div class="session-panel_header">
        <span ng-if="targetInfo.type == 'user'">与{{targetInfo.username}}聊天中</span>
        <span ng-if="targetInfo.type == 'group'">{{targetInfo.groupname}}</span>
        <div class="pull-right" ng-if="targetInfo.type == 'group'">
            <button title="增加群成员" class="btn btn-default header-btn-wrap" data-toggle="modal" data-target="#addGroupMemberModal" ng-click="getOtherMember(targetInfo.groupid)">+</button>
            <button title="删除群成员" class="btn btn-default header-btn-wrap" data-toggle="modal" data-target="#delGroupMemberModal" ng-click="getAllGroupMember(targetInfo.groupid)">-</button>
            <button title="解散群组" class="btn btn-default header-btn-wrap"  data-toggle="modal" data-target="#destroyGroupModal">解散群组</button>
            <button title="退出群组" class="btn btn-default header-btn-wrap" data-toggle="modal" data-target="#quitGroupModal">退出群组</button>
        </div>
    </div>
    <div class="session-panel_body">
        <div class="33session-panel_content">
            <div class="message clearfix" ng-class="{'me': message.messageDirection === 1 , 'other': message.messageDirection === 2 }" ng-repeat="message in msg_map[targetInfo.mapkey] track by $index">
                <p class="message_system">
                    <!--<span class="content">12:22</span>-->
                </p>
                <div class="contact-info ">
                    <img class="contact-avatar"  alt="" src="{{message.portrait}}">
                    <div class="contact-name">{{message.senderUserName}}</div>
                </div>
                <div class="message-text">
                    <div class="bubble left" ng-class="{'bubble_primary right': message.messageDirection === 1 , 'bubble_default left': message.messageDirection === 2 }" >
                        <div class="bubble_cont">
                            <div class="plan">{{message.content.content}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="session-panel_send">
            <div class="input-group">
                <input type="text" class="form-control session-panel_input" placeholder="请输入聊天内容" ng-model="message">
                  <span class="input-group-btn">
                    <button class="btn btn-default session-panel_btn" type="button" ng-click="sendMessage()" ng-disabled="sendButtonStatus">发送</button>
                  </span>
            </div>
        </div>
    </div>
    <!-- 添加群成员对话框 -->
    <div class="modal fade" ng-if="targetInfo.type == 'group'" id="addGroupMemberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="addGroupMemberModalLabel">增加群成员</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">选择成员</label>
                            <div class="col-sm-10" style="height: 200px; overflow: auto">
                                <div class="checkbox"  ng-repeat="othermember in otherMembers track by $index" >
                                    <label>
                                        <input type="checkbox" name={{othermember.userid}} ng-model="othermember['checked']"  id="othermember-{{$index + 1}}">
                                        {{othermember.username}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="addGroupMember(targetInfo.groupid)" data-loading-text="确认中...">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 删除群成员对话框 -->
    <div class="modal fade" ng-if="targetInfo.type == 'group'" id="delGroupMemberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="delGroupMemberModalLabel">删除群成员</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">选择成员</label>
                            <div class="col-sm-10" style="height: 200px; overflow: auto">
                                <div class="checkbox"  ng-repeat="groupMember in allGroupMember  track by $index" >
                                    <label>
                                        <input type="checkbox" name={{groupMember.userid}} ng-model="groupMember['checked']"  id="member-{{$index + 1}}">
                                        {{groupMember.username}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="delGroupMember(targetInfo.groupid)" data-loading-text="确认中...">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 退出群对话框 -->
    <div class="modal fade" ng-if="targetInfo.type == 'group'" id="quitGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>确认解散{{targetInfo.groupname}}？</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="quitGroup(targetInfo.groupid, userId)" data-loading-text="确认中...">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 解散群对话框 -->
    <div class="modal fade" ng-if="targetInfo.type == 'group'" id="destroyGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>确认解散{{targetInfo.groupname}}？</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="destroyGroup(targetInfo.groupid, userId)" data-loading-text="确认中...">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
